<template>
  <div>
    <RefreshComponent @updateData="updateData"></RefreshComponent>
    <view>
      <i-collapse accordion name="0">
        <i-collapse-item
          v-for="(item ,index) in newsArr"
          :key="index"
          :name="index"
          :title="item.title"
          i-class-title="title-class"
          i-class-content="content-class"
        >
          <view slot="content" v-html="item.content"></view>
        </i-collapse-item>
      </i-collapse>
    </view>
    <i-spin size="large" fix v-if="spinShow"></i-spin>
  </div>
</template>

<script>
  import RefreshComponent from '@/components/public/RefreshComponent'
  export default {
    data () {
      return {
        newsArr: [],
        spinShow: false,
        currPage: 1
      }
    },
    components: { RefreshComponent },
    methods: {
      getTonguesList () {
        this.spinShow = true
        wx.request({
          url: 'https://api.tianapi.com/txapi/rkl/', // 这里必须在后面呢加上 '/',才可以访问到
          data: {
            key: 'c732ed00482b7208218faf599e32239a',
            num: 10,
            page: this.currPage
          },
          header: {'content-type':'application/json'},
          method: 'GET',
          dataType: 'json',
          responseType: 'text',
          success: (result)=>{
            const { code, newslist = [] } = result.data
            if (code === 200) {
              newslist.forEach((element, index) => {
                element.title = `绕口令-${index + 1}`
              });
              this.newsArr = newslist
            }
          },
           complete: ()=>{
            this.spinShow = false
            wx.stopPullDownRefresh()
           }
        })
      },
      updateData () {
        this.getTonguesList()
      }
    },
    onLoad () {
      this.getTonguesList()
    },
    onPullDownRefresh () {
      this.currPage = 1
      this.newsArr = []
      this.getTonguesList()
    },
    onReachBottom () {
      this.currPage ++
      this.getTonguesList()
    }
  }
</script>

<style>
  .title-class {
    font-size: 14px;
    color: lightslategray;
  }
  .content-class {
    font-size: 16px;
  }
  .content-item {
    margin-bottom: 20rpx;
  }
  .content-poems {
    text-align: center;
  }
  .author-sub-class {
    color: #bbb;
    font-size: 12px;
  }
  .content-kind-class {
    color: red;
  }
</style>